
<template>
  <div id="c1"></div>
</template>
<style>
.g2-guide-html {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 0.1
}

.g2-guide-html .title {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 300;
}

.g2-guide-html .value {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}
</style>
<script>

export default {
  name: "DonutWen",
  data(){
    return{
        data:[{
          type: '男性',
          value: 56.4
        }, {
          type: '女性',
          value: 43.6
        }],
      }
  },
  methods:{

      eachView: function eachView(view, facet) {
      var data = facet.data;
      var color = void 0;
      if (data[0].type === '男性') {
        color = '#0a9afe';
      } else {
        color = '#f0657d';
      }
      data.push({
        type: '其他',
        value: 100 - data[0].value
      });
      view.source(data);
      view.coord('theta', {
        radius: 0.8,
        innerRadius: 0.5
      });
      view.intervalStack().position('value').color('type', [color, '#eceef1']).opacity(1);
      view.guide().html({
        position: ['50%', '50%'],
        html: '<div class="g2-guide-html"><p class="title">' + data[0].type + '</p><p class="value">' + (data[0].value + '%') + '</p></div>'
      });
      chart.interval().position('genre*sold').color('genre')
      chart.render();
    }},

  mounted() {
    var chart = new G2.Chart({
      container: 'c1',
      forceFit: true,
      height: window.innerHeight,
      padding: 'auto'
    });
    chart.source(data);
    chart.legend(false);
    chart.facet('rect', {
      fields: ['type'],
      padding: 20,
      showTitle: false,
      eachView: function eachView(view, facet) {
        var data = facet.data;
        var color = void 0;
        if (data[0].type === '男性') {
          color = '#0a9afe';
        } else {
          color = '#f0657d';
        }
        data.push({
          type: '其他',
          value: 100 - data[0].value
        });
        view.source(data);
        view.coord('theta', {
          radius: 0.8,
          innerRadius: 0.5
        });
        view.intervalStack().position('value').color('type', [color, '#eceef1']).opacity(1);
        view.guide().html({
          position: ['50%', '50%'],
          html: '<div class="g2-guide-html"><p class="title">' + data[0].type + '</p><p class="value">' + (data[0].value + '%') + '</p></div>'
        });
      }})
    chart.render();
  },
}
</script>